/*
 * @Author: hongbin
 * @Date: 2022-11-24 15:40:50
 * @LastEditors: hongbin
 * @LastEditTime: 2022-12-20 21:09:39
 * @Description:
 */

import { FC, useCallback, useEffect } from "react";
import styled from "styled-components";
import Image from "next/image";
import { FlexDiv } from "../../styled";
import { IPart, IPartConfig, IUserPartsConfig } from "./types";
import { SetState } from "../../meta/types";

interface IProps {
    list: IPart[];
    onSelect: (part: IPart) => void;
    wearParts: IPart[];
    partsConfig: Record<string, IPartConfig>;
    setUserPartsConfig: SetState<IUserPartsConfig>;
}

const PartsList: FC<IProps> = ({ list = [], onSelect, wearParts, partsConfig, setUserPartsConfig }) => {
    const allPartName = list.map((p) => p.name);
    const selectPart = wearParts.find((p) => allPartName.includes(p.name));

    const setCurrentPartConfig = useCallback(
        (key: keyof IPartConfig, value: IPartConfig[keyof IPartConfig]) => {
            // setUserPartsConfig((prev) => ({ ...prev, [selectPart!.name]: { ...prev[selectPart!.name], [key]: value } }));
            setUserPartsConfig((prev) => ({
                ...prev,
                [prev.current]: {
                    ...prev[prev.current],
                    [selectPart!.name]: { ...prev[prev.current][selectPart!.name], [key]: value },
                },
            }));
        },
        [setUserPartsConfig, selectPart]
    );

    return (
        <Container>
            <List>
                {list.map((part) => (
                    <Part select={selectPart?.name === part.name} onClick={() => onSelect(part)} key={part.name}>
                        <Image loading="lazy" src="/logo.svg" layout="intrinsic" width={200} height={200} alt=".." />
                        <span style={{ marginLeft: "1vw" }}>{part.name}</span>
                    </Part>
                ))}
            </List>
            {selectPart ? (
                <StylePlane>
                    <h3>配件样式</h3>
                    <Content>
                        <FlexDiv justify="space-between">
                            <h4>颜色</h4>
                            <input
                                onChange={(e) => setCurrentPartConfig("color", e.target.value)}
                                type="color"
                                value={partsConfig[selectPart.name].color}
                            />
                        </FlexDiv>
                        <FlexDiv justify="space-between">
                            <h4>透明度</h4>
                            <input
                                onChange={(e) => setCurrentPartConfig("opacity", e.target.value)}
                                value={partsConfig[selectPart.name].opacity}
                                type="range"
                                min="0"
                                max="1"
                                step={0.1}
                            />
                        </FlexDiv>
                        <FlexDiv justify="space-between">
                            <h4>金属度</h4>
                            <input
                                onChange={(e) => setCurrentPartConfig("metalness", e.target.value)}
                                value={partsConfig[selectPart.name].metalness}
                                type="range"
                                min="0"
                                max="1"
                                step={0.1}
                            />
                        </FlexDiv>
                    </Content>
                </StylePlane>
            ) : null}
        </Container>
    );
};

export default PartsList;

const Content = styled.div`
    overflow: hidden scroll;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1vh 1vw;
    color: #fffae5;
    & > div {
        margin: 1vh;
        input[type="color" i]::-webkit-color-swatch-wrapper {
            padding: 0;
        }
    }
`;

const Part = styled.div<{ select: boolean }>`
    width: 90%;
    height: 10vh;
    background: ${({ select }) => (select ? "#67cc38" : "#1a3b0b")};
    color: #fffae5;
    border-radius: 1vw;
    margin-top: 1vh;
    display: flex;
    align-items: center;
    img {
        width: 8vh !important;
        height: 8vh !important;
        border-radius: 1vh;
        /* margin: 0 2vw; */
    }
`;

const List = styled.div`
    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 1vh;
    overflow: hidden scroll;
`;

/**
 * 配件的自定义样式面板
 */
const StylePlane = styled.div`
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;

    & > h3 {
        background: #1a3b0b;
        width: 100%;
        padding: 0 0 0 1vw;
        color: #fffae5;
    }
`;

const Container = styled.div`
    background: #fff;
    width: 80%;
    display: flex;
    flex-direction: column;
    background: #3a7720;
    & > * {
    }
`;
